import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Layout } from 'antd';
import { Menu } from 'antd';
import { BrowserRouter, Route, Switch, NavLink } from 'react-router-dom'
import Home from './pages/home'
import Mess from './pages/mess'
import Hot from './pages/hot'
import Detail from './pages/detail'
const { Header, Footer, Content } = Layout;

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Layout>
          <Header style={{ backgroundColor: '#fff', padding: '0 100px' }}>
            <Menu mode="horizontal">
              <Menu.Item key='0'>
                <NavLink to="/home">首页</NavLink>
              </Menu.Item>
              <Menu.Item key='1'>
                <NavLink to="/hot">热点</NavLink>
              </Menu.Item>
              <Menu.Item key='2'>
                <NavLink to="/mess">资讯</NavLink>
              </Menu.Item>
            </Menu>
          </Header>
          <Content style={{
            width: 1000,
            minHeight: '75vh',
            margin: 'auto'
          }}>
            <Switch>
              <Route path="/home" component={Home}></Route>
              <Route path="/hot" component={Hot}></Route>
              <Route path="/mess" component={Mess}></Route>
              <Route path="/post/:id" component={Detail}></Route>
            </Switch>
          </Content>
          <Footer>Footer</Footer>
        </Layout>
      </BrowserRouter>


    );
  }
}

export default App;
